<template>
  <div class="home pages">
    <Top></Top>
    <Nav></Nav>
    <div class="home-content">
      <div class="banner-content">
        <div class="banner">
          <div class="block" v-loading="swiperLoading">
            <el-carousel height="400px">
              <el-carousel-item v-for="item in swiperList" :key="item.id">
                <span class="demonstration">{{ item.name }}</span>
                <img :src="item.url" class="banner1">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="banner-list">
          <div class="top">
            <div class="left">
              <div :class="fairActive===56?'active':''" @click="fairActive=56"  class="tab-item">
                新闻动态
              </div>
              <div :class="fairActive===57?'active':''" @click="fairActive=57"  class="tab-item">
                市妇联动态
              </div>
              <div :class="fairActive===43?'active':''" @click="fairActive=43"  class="tab-item">
                通知公告
              </div>
            </div>
            <div class="right" @click="toMore(fairActive)">更多</div>
          </div>
          <div class="bottom">
            <template v-if="bannerList.length>0" v-loading="bannerLoading">
              <div class="bottom-item" v-for="item in bannerList" :key="item.id" @click="skip(item.id)">
                <div class="article">
                  <img src="@/assets/home/right.png" alt="">
                  <div class="title">
                    {{ item.title }}
                  </div>
                </div>
                <div class="time">{{ item.create_time }}</div>
              </div>
            </template>
            <el-empty description="暂无数据" v-else></el-empty>
          </div>
        </div>
      </div>

      <div class="lecture-block">
<!--        <div class="lecture-item" @click="toHome(61)" >-->
<!--          <div class="lecture">党纪学习教育</div>-->
<!--        </div>-->
        <div class="lecture-item" @click="goDetail" >
          <div class="lecture">学习宣传贯彻</div>
          <div class="lecture">党的二十届三中全会精神</div>
        </div>
        <div class="lecture-item" @click="toHome(64)">
          <div class="lecture">中国妇女第十三次全国代表大会</div>
        </div>
        <div class="lecture-item" @click="toHome(106)" >
          <div class="lecture">酒泉市第五次妇女代表大会</div>
        </div>
      </div>

      <div class="news-block">
        <div class="news-item">
          <div class="news-list" >
            <div class="news-title">
              <div class="title">宣传引领</div>
              <div class="more" @click="toMore(60)">更多</div>
            </div>
            <template v-if="newsList.length>0" v-loading="newsLoading">
              <div class="list-news-item">
                <div v-for="item in newsList" :key="item.id" class="list-news"  @click="skip(item.id)">
                  <div class="title-item">
                    <div class="round"></div>
                    <div class="title">{{item.title}}</div>
                  </div>
                </div>
              </div>
            </template>
            <el-empty description="暂无数据" v-else style="height: 100px" :image-size="60"></el-empty>
          </div>
          <div class="news-list" >
            <div class="news-title">
              <div class="title">权益维护</div>
              <div class="more" @click="toMore(47)">更多</div>
            </div>
            <template v-if="newsList1.length>0" v-loading="newsLoading">
              <div class="list-news-item">
                <div v-for="item in newsList1" :key="item.id" class="list-news"  @click="skip(item.id)">
                  <div class="title-item">
                    <div class="round"></div>
                    <div class="title">{{item.title}}</div>
                  </div>
                </div>
              </div>
            </template>
            <el-empty description=" 无数据" v-else style="height: 100px" :image-size="60"></el-empty>
          </div>
          <div class="news-list" >
            <div class="news-title">
              <div class="title">组织建设</div>
              <div class="more" @click="toMore(48)">更多</div>
            </div>
            <template v-if="newsList2.length>0" v-loading="newsLoading">
              <div class="list-news-item">
                <div v-for="item in newsList2" :key="item.id" class="list-news"  @click="skip(item.id)">
                  <div class="title-item">
                    <div class="round"></div>
                    <div class="title">{{item.title}}</div>
                  </div>
                </div>
              </div>
            </template>
            <el-empty description="暂无数据" v-else style="height: 100px" :image-size="60"></el-empty>
          </div>
          <div class="news-list" >
            <div class="news-title">
              <div class="title">巾帼行动</div>
              <div class="more" @click="toMore(49)">更多</div>
            </div>
            <template v-if="newsList3.length>0" v-loading="newsLoading">
              <div class="list-news-item">
                <div v-for="item in newsList3" :key="item.id" class="list-news"  @click="skip(item.id)">
                  <div class="title-item">
                    <div class="round"></div>
                    <div class="title">{{item.title}}</div>
                  </div>
                </div>
              </div>
            </template>
            <el-empty description="暂无数据" v-else style="height: 100px" :image-size="60"></el-empty>
          </div>
          <div class="news-list" >
            <div class="news-title">
              <div class="title">家庭建设</div>
              <div class="more" @click="toMore(50)">更多</div>
            </div>
            <template v-if="newsList4.length>0" v-loading="newsLoading">
              <div class="list-news-item">
              <div v-for="item in newsList4" :key="item.id" class="list-news"  @click="skip(item.id)">
                <div class="title-item">
                  <div class="round"></div>
                  <div class="title">{{item.title}}</div>
                </div>
              </div>
            </div>
            </template>
            <el-empty description="暂无数据" v-else style="height: 100px" :image-size="60"></el-empty>
          </div>
          <div class="news-list" >
            <div class="news-title">
              <div class="title">妇儿工委</div>
              <div class="more" @click="toMore(51)">更多</div>
            </div>
            <template v-if="newsList5.length>0" v-loading="newsLoading">
             <div class="list-news-item">
               <div v-for="item in newsList5" :key="item.id" class="list-news"  @click="skip(item.id)">
                 <div class="title-item">
                   <div class="round"></div>
                   <div class="title">{{item.title}}</div>
                 </div>
               </div>
             </div>
            </template>
            <el-empty description="暂无数据" v-else style="height: 100px" :image-size="60"></el-empty>
          </div>
        </div>
        <div class="image-item">
          <img class="image-list" src="@/assets/home/news1.png" alt="" @click="toImage(89,'维权热线')"/>
          <router-link  :to=" {path:'/mailbox'}">
            <img class="image-list" src="@/assets/home/news2.png" alt=""/>
          </router-link>
          <img class="image-list" src="@/assets/home/news3.png" alt="" @click="toHome(67,'普法课堂')"/>
        </div>
      </div>

      <div class="menu-block">
        <img class="menu-img" src="@/assets/home/menu2.png" alt="" @click="toHome(72,'三八红旗手')"/>
        <img class="menu-img" src="@/assets/home/menu3.png" alt="" @click="toHome(75,'帼建功标兵')"/>
<!--        <img class="menu-img" src="@/assets/home/menu1.png" alt="" @click="toHome(78,'最美家庭')"/>-->
        <img class="menu-img" src="@/assets/home/menu-5.jpg" alt=""  @click="toHome(82,'巾帼志愿服务')"/>
      </div>

      <div class="notice">
        <div class="notice-left">
          <div class="tab">
            <div class="tab-item" :class="regionActive===36?'active':''" @click="regionActive=36">
              肃州区
            </div>
            <div class="tab-item" :class="regionActive===37?'active':''" @click="regionActive=37">
              金塔县
            </div>
            <div class="tab-item" :class="regionActive===38?'active':''" @click="regionActive=38">
              玉门市
            </div>
            <div class="tab-item" :class="regionActive===42?'active':''" @click="regionActive=42">
              瓜州县
            </div>
            <div class="tab-item" :class="regionActive===39?'active':''" @click="regionActive=39">
              敦煌市
            </div>
            <div class="tab-item" :class="regionActive===40?'active':''" @click="regionActive=40">
              肃北县
            </div>
            <div class="tab-item" :class="regionActive===41?'active':''" @click="regionActive=41">
              阿克塞县
            </div>
          </div>
          <div class="bottom"  >
           <template v-loading="regionLoading" v-if="regionList.length>0">
             <div class="bottom-item" v-for="item in regionList" :key="item.id" @click="skip(item.id)">
               <div class="article">
                 <img src="@/assets/home/right.png" alt="">
                 <div class="title">
                   {{ item.title }}
                 </div>
               </div>
               <div class="time">{{ item.create_time }}</div>
             </div>
           </template>
            <el-empty description="暂无数据" v-else></el-empty>
          </div>
        </div>
        <div class="notice-right" v-loading="specialLoading">
<!--          <img class="notice-img" src="@/assets/home/notice1.png" alt="" @click="toHome(82,'巾帼志愿服务')"/>-->
          <img class="notice-img" src="@/assets/home/notice2.png" alt="" @click="toHome(86,'平安建设')"/>
          <img class="notice-img" src="@/assets/home/notice3.png" alt="" @click="toHome(85,'道德讲堂')"/>
          <img class="notice-img" src="@/assets/home/notice6.png" alt="" @click="toHome(113,'我们的节日')"/>
          <img class="notice-img" src="@/assets/home/notice4.png" alt="" @click="toHome(87,'信息公开')"/>
        </div>
      </div>
<!--      <div class="img3">-->
<!--        <img src="@/assets/home/21.jpg" alt=""  class="img3">-->
<!--      </div>-->
      <div class="title-block">
        <div class="home-title">—图片集锦—</div>
        <div class="more" @click="goListMore(1)">更多></div>
      </div>
      <div class="picture" v-loading="swiperLoading1">
        <div class="pictures" v-for="item in swiperList1" :key="item.id" @click="skip1(item.id,item.jump_url)">
          <img :src="item.url" alt="">
          <div class="text">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="title-block">
        <div class="home-title">—视频集锦—</div>
        <div class="more" @click="goListMore(2)">更多></div>
      </div>
<!--      <div class="img3">-->
<!--        <img src="@/assets/home/videoi.png" alt=""  class="img3">-->
<!--      </div>-->
      <div class="picture" v-loading="videoLoading">
        <div class="pictures" v-for="item in videoList" :key="item.id" @click="goVideo(item.id)">
          <img :src="item.url" alt="" >
          <img src="@/assets/home/bofang.png" alt="" class="video-img">
          <div class="text">
            {{item.name}}
          </div>
        </div>
      </div>

<!--      <div class="img3">-->
<!--        <img src="@/assets/home/23.jpg" alt=""  class="img3">-->
<!--      </div>-->
      <div class="title-block">
        <div class="home-title">—生活百科—</div>
      </div>
      <div class="encyclopedia">
        <div class="encyclopedia-item">
          <div class="title">
            <div class="title-content">养生保健</div>
            <div class="more" @click="toMore(30)">更多></div>
          </div>
          <div class="list" v-loading="lifeLoading1">
            <div class="list-item" v-for="item in lifeList" :key="item.id" @click="skip(item.id)">
              <div class="circle"></div>
              <div class="text">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div class="encyclopedia-item">
          <div class="title">
            <div class="title-content">女性学堂</div>
            <div class="more" @click="toMore(31)">更多></div>
          </div>
          <div class="list" v-loading="lifeLoading">
            <div class="list-item" v-for="item in lifeList1" :key="item.id" @click="skip(item.id)">
              <div class="circle"></div>
              <div class="text">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div class="encyclopedia-item">
          <div class="title">
            <div class="title-content">情感课堂</div>
            <div class="more" @click="toMore(32)">更多></div>
          </div>
          <div class="list">
            <div class="list-item" v-for="item in lifeList2" :key="item.id" @click="skip(item.id)">
              <div class="circle"></div>
              <div class="text">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div class="encyclopedia-item">
          <div class="title">
            <div class="title-content">流行风尚</div>
            <div class="more" @click="toMore(33)">更多></div>
          </div>
          <div class="list">
            <div class="list-item" v-for="item in lifeList3" :key="item.id" @click="skip(item.id)">
              <div class="circle"></div>
              <div class="text">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>

<!--      <div class="img3">-->
<!--        <img src="@/assets/home/24.jpg" alt=""  class="img3">-->
<!--      </div>-->
      <div class="title-block">
        <div class="home-title">—友情链接—</div>
      </div>
      <div class="link">
        <div class="link-item" v-for="item in linkList" :key="item.id">
          <el-dropdown>
            <el-button type="primary">
              --{{ item.name }}--<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="">
              <el-dropdown-item><div @click="skipLink(item.url)">{{ item.url }}</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
// @ is an alias to /src
import Top from '@/components/Top.vue'
import Nav from '@/components/Nav.vue'
import Bottom from '@/components/Bottom.vue'
import {
  getCategoryApi, getLinksListApi,
  getNoticeIndexListApi, getNoticeListApi,
  getPageDetailApi,
  getSwiperListApi,
  getSystemConfigDataApi,
} from "@/api/spotlight";
import {getVideoListApi}from "@/api/video";
export default {
  name: 'home',
  data(){
    return{
      regionActive:36,
      regionLoading:false,
      lifeLoading:false,
      lifeLoading1:false,
      specialLoading:false,
      bannerLoading:false,
      swiperLoading:false,
      swiperLoading1:false,
      newsLoading:false,
      picList:[
        {
          id: 1,
          src: ''
        }
      ],
      title:'',
      limit: 4,
      swiperList:[],
      swiperList1:[],
      fairActive: 56, //头条新闻
      category_id: 3,
      bannerList:[],
      regionList:[],
      special:[],
      lifeList:[],
      lifeList1:[],
      lifeList2:[],
      lifeList3:[],
      mineInfo:{},
      mineDetail:{},
      linkList:[],
      newsList:[],
      newsList1:[],
      newsList2:[],
      newsList3:[],
      newsList4:[],
      newsList5:[],
      videoLoading:false,
      videoList:[]
    }
  },
  watch:{//监听
    id:{
      handler(value){
        this.id = value
        this.getNoticeIndexList()
      }
    },
    fairActive:{
      handler(value){
        this.getNoticeIndexList()
      }
    },
    regionActive:{
      handler(value){
        this.getNoticeIndexList36()
      }
    },
  },
  methods: {
    goVideo(id){
      //this.$router.push({ path: '/videoDetail', query: { id:id }})

      const routeInfo = this.$router.resolve({
        name: 'videoDetail', // 路由的名字
        query: { id: id }, // 如果有参数
      });

      // 使用 window.open 打开新的页面
      window.open(routeInfo.href || routeInfo.url); // 兼容不同版本的 Vue Router
    },
    toMore(id)
    {
      if ([56,57].includes(id)){
        //新闻动态、市妇联动态
        this.$router.push({ path: '/spotlight/spotlightList', query: { id:3,sub_id:id }})
      }else if(id===60){
        //宣传引领
        this.$router.push({ path: '/spotlight/spotlightList', query: { id:46,sub_id:id }})
      }else if(id===27){
        this.$router.push({ path: '/spotlightMore', query: { id:id }})
      }else{
        this.$router.push({ path: '/spotlight/spotlightList', query: { id:id }})
      }
    },
    goListMore(type){
      this.$router.push({ path: '/videoList', query: {type:type }})
    },
    goDetail(){
      window.open('https://www.12371.cn/special/20jszqh/')
    },
    toHome(row,name) {
      this.$router.push({ path: '/imageList', query: { id:row }})
      /*const routeInfo = this.$router.resolve({
        name: 'imageList', // 路由的名字
        query: { id: row }, // 如果有参数
      });

      // 使用 window.open 打开新的页面
      window.open(routeInfo.href || routeInfo.url); // 兼容不同版本的 Vue Router*/
    },
    toImage(row){
      this.$router.push({ path: '/imageDetails', query: { id:row }})
      /*const routeInfo = this.$router.resolve({
        name: 'imageDetails', // 路由的名字
        query: { id: row }, // 如果有参数
      });

      // 使用 window.open 打开新的页面
      window.open(routeInfo.href || routeInfo.url); // 兼容不同版本的 Vue Router*/
    },
    //轮播图
    getSwiperList() {
      this.swiperLoading = true
      getSwiperListApi( {limit:this.limit,category_id:22}).then((res) => {
        this.swiperList = res.result;
      }).finally(()=>{
        this.swiperLoading = false
      })
    },
    //图片集锦
    getSwiperList1() {
      this.swiperLoading1 = true
      getSwiperListApi( {limit:5,category_id:23}).then((res) => {
        this.swiperList1 = res.result;
      }).finally(()=>{
        this.swiperLoading1 = false
      })
    },
    //视频集锦
    getVideoList() {
      this.videoLoading = true
      getVideoListApi( {limit:5}).then((res) => {
        this.videoList = res.result;
      }).finally(()=>{
        this.videoLoading = false
      })
    },
    //轮播图旁边新闻列表,今日聚焦
    getNoticeIndexList() {
      this.bannerLoading = true
      getNoticeIndexListApi( {limit:7,category_id:this.fairActive}).then((res) => {
        this.bannerList = res.result;
      }).finally(()=>{
        this.bannerLoading = false
      })
    },
    //专题专栏列表
    getNoticeIndexList3() {
      this.specialLoading = true
      getNoticeIndexListApi( {limit:10,category_id:29}).then((res) => {
        this.special = res.result;
      }).finally(()=>{
        this.specialLoading = false
      })
    },
    //生活百科
    getNoticeIndexList4() {
      this.lifeLoading1 = true
      getNoticeIndexListApi( {limit:3,category_id:30}).then((res) => {
        this.lifeList = res.result;
      }).finally(()=>{
        this.lifeLoading1 = false
      })
    },
    //女性学堂
    getNoticeIndexList5() {
      this.lifeLoading = true
      getNoticeIndexListApi( {limit:3,category_id:31}).then((res) => {
        this.lifeList1 = res.result;
      }).finally(()=>{
        this.lifeLoading = false
      })
    },
    //情感课堂
    getNoticeIndexList6() {
      this.lifeLoading = true
      getNoticeIndexListApi( {limit:3,category_id:32}).then((res) => {
        this.lifeList2 = res.result;
      }).finally(()=>{
        this.lifeLoading = false
      })
    },
    //流行风尚
    getNoticeIndexList7() {
      this.lifeLoading = true
      getNoticeIndexListApi( {limit:3,category_id:33}).then((res) => {
        this.lifeList3 = res.result;
      }).finally(()=>{
        this.lifeLoading = false
      })
    },
    //地区:肃州区、金塔县、玉门市、敦煌市、肃北县、阿克塞县、瓜州县
    getNoticeIndexList36() {
      this.regionLoading = true
      getNoticeIndexListApi( {limit:10,category_id:0,area_id:this.regionActive}).then((res) => {
        this.regionList = res.result;
        this.regionList.forEach((item)=>{
          item.create_time=item.create_time.slice(0, -8);
        })
      }).finally(()=>{
        this.regionLoading = false
      })
    },
    getNewsList() {
      this.newsLoading = true
      getNoticeIndexListApi( {limit:3,category_id:60}).then((res) => {
        this.newsList = res.result;
        this.newsLoading = false
      })
      getNoticeIndexListApi( {limit:3,category_id:90}).then((res) => {
        this.newsList1 = res.result;
        this.newsLoading = false
      })
      getNoticeIndexListApi( {limit:3,category_id:48}).then((res) => {
        this.newsList2 = res.result;
        this.newsLoading = false
      })
      getNoticeIndexListApi( {limit:3,category_id:49}).then((res) => {
        this.newsList3 = res.result;
        this.newsLoading = false
      })
      getNoticeIndexListApi( {limit:3,category_id:50}).then((res) => {
        this.newsList4 = res.result;
        this.newsLoading = false
      })
      getNoticeIndexListApi( {limit:3,category_id:51}).then((res) => {
        this.newsList5 = res.result;
        this.newsLoading = false
      })
    },
    skip(id){
      //this.$router.push({ name: 'spotlightDetail',query:{id:id} })
      // 使用 this.$router.resolve 获取目标路由的完整路径信息
      const routeInfo = this.$router.resolve({
        name: 'spotlightDetail', // 路由的名字
        query: { id: id }, // 如果有参数
      });

      // 使用 window.open 打开新的页面
      window.open(routeInfo.href || routeInfo.url); // 兼容不同版本的 Vue Router
    },
    skip1(id,url){
      if(url!=''){
       window.open(url)
        return
      }

      const routeInfo = this.$router.resolve({
        name: 'imageDetail', // 路由的名字
        query: { id: id }, // 如果有参数
      });

      // 使用 window.open 打开新的页面
      window.open(routeInfo.href || routeInfo.url); // 兼容不同版本的 Vue Router
    },
    skipLink(url){
      if(url!=''){
        window.open(url)
      }
    },
    //关于我们详情
    getPageDetail() {
      getPageDetailApi().then((res) => {
        this.mineDetail = res.result;
      })
    },
    //友情链接s
    getLinksList() {
      getLinksListApi().then((res) => {
        this.linkList = res.result;
      })
    },
  },
  components: {
    Top,
    Nav,
    Bottom,
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
     this.getNewsList()
    this.getSwiperList()
    this.getSwiperList1()
    this.getNoticeIndexList()
    this.getNoticeIndexList3()
    this.getNoticeIndexList4()
    this.getNoticeIndexList5()
    this.getNoticeIndexList6()
    this.getNoticeIndexList7()
    this.getPageDetail()
    this.getLinksList()
    this.getNoticeIndexList36()
    this.getVideoList()
  }
}
</script>

<style lang="scss" scoped>
.home{
  display: flex;
  flex-direction: column;
  align-items: center;
  .home-content{
    width: 1220px;
    margin-bottom: 100px;

    .lecture-block{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .lecture-item{
        width: calc((100% - 30px) / 3);
        margin-right: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background:linear-gradient(to bottom,#F35957,#C10D0E);
        height: 80px;
        align-items: center;
        color: #FFFFFF;
        font-size: 24px;
        cursor: pointer;
      }
      //.lecture-item:first-child{
      //  color: #FAE49C;
      //  background: url("@/assets/home/lecture-bg.png")no-repeat center;
      //  background-size: 100% 100%;
      //}
      .lecture-item:last-child{
        margin-right: 0;
      }
    }
    .news-block{
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      margin-bottom: 30px;

      .news-item{
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        height: 520px;
        .news-list:nth-child(2n){
          margin-right: 0;
        }
        .news-list{
          width: calc((100% - 15px)/2);
          height: calc(100% / 3);
          margin-right: 15px;
          margin-bottom: 15px;
          border: 1px solid #F5F5F5;
          .news-title{
            background: #F8F9FB;
            height:40px;
            border-top: 1px solid;
            padding-left: 15px;
            border-image: linear-gradient(to right,  #FEA391 30%, #FE5569 60%, #FD1548 90%) 3 stretch;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            .title{
              background: #E8416F;
              width: 80px;
              height: 30px;
              color: #FFFFFF;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 8px;
            }
            .more{
              font-size: 14px;
              color: #E8416F;
              cursor: pointer;
            }
          }
          .list-news-item{
            height: calc(100% - 40px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            overflow-y: scroll;
            scrollbar-width: none;
          }
          .list-news{
            padding-left: 15px;
           .title-item{
             display: flex;
             align-items: center;
             cursor: pointer;
             line-height: 40px;
             .round{
               width: 5px;
               height: 5px;
               background: #DEDEDE;
               margin-right: 5px;
             }
             .title{
               width: calc(100% - 15px);
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
               color: #8D8B8A;
               font-size: 15px;
             }
             .title:hover{
               color: #CD1738;
             }
           }
          }
        }
      }
      .image-item{
        width: calc(25% - 15px);
        .image-list{
          width: 100%;
          height: 175px;
          margin-bottom: 15px;
        }
      }
    }
    .img3{
      width: 250px;
      margin: 10px auto;
    }
    .banner-content{
      width: 1220px;
      margin: 20px auto 45px;
      display: flex;
      .banner{
        width: calc((59% - 40px));
        height: 400px;
        margin-right: 30px;
        background-color: rebeccapurple;
        .block{
          position: relative;
          width: 100%;
          height: 400px;
          .banner1{
            width: 100%;
            height: 400px;
          }
          .demonstration{
            position: absolute;
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            //color: #F7F7F7;
            bottom: 0;
            z-index: 99;
            background-color: red;
            background-color: rgba(255,255,255,0.4);
          }
          ::v-deep{
            .el-carousel__indicators {// 指示器
              left: unset;
              transform: unset;
              right: 2%;
            }
            .el-carousel__button {// 指示器按钮
              width: 10px;
              height: 10px;
              border: none;
              border-radius: 50%;
              background-color: rgba(0, 0, 0, 0.2);
            }
            .is-active .el-carousel__button { // 指示器激活按钮
              background: #3f8ec8;
            }
          }
        }

      }
      .banner-list{
        width: calc((46% - 40px));
        .top{
          border-bottom: 1px solid #EDEDED;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          .left{
            display: flex;
            width: calc(100% - 110px);
            .tab-item{
              width: 115px;
              height: 45px;
              line-height: 45px;
              text-align: center;
              color: #F83763;
              font-weight: 900;
              font-size: 17px;
              cursor: pointer;

            }
            .tab-item.active{
              background-color: #F83763;
              color: #fff;
              border-radius: 8px;
            }
          }
          .right{
            width: 110px;
            color: #CD1738;
            cursor: pointer;
            display: flex;
            justify-content: center;
          }
        }
        .bottom{
          width: 100%;
          height: 338px;
          overflow: hidden;
          .bottom-item{
            display: flex;
            justify-content: space-between;
            height: 48px;
            line-height: 48px;
            border-bottom: 1px dashed #EDEDED;
            overflow: hidden;
            cursor: pointer;
            .article{
              display: flex;
              align-items: center;
              width: calc(100% - 110px);
              img{
                width: 20px;
                height: 20px;
              }
              .title{
                width: 380px;
                margin-left: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .time{
              width: 110px;
              color: #5b5858;
              display: flex;
              justify-content: flex-end;
            }
          }
          .bottom-item:hover{
            color: #CD1738;
          }
        }
      }
    }
    .title-block{
      width: 1200px;
      display: flex;
     // flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin: 40px auto;
      .home-title{
        width: 60%;
        text-align: end;
        font-size: 26px;
        background: linear-gradient(to right, #FE8C9F 30%, #F47AA3 60%, #E76AAB 90%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 5px; /* 增加字母间距 */
        font-weight: bold;
      }
      .more{
        //position: absolute;
        //right: 19%;
        width: 40%;
        color: #F984A0;
        font-size: 15px;
        cursor: pointer;
        text-align: end;
      }
    }
    .picture{
      display: flex;
      .pictures{
        width: calc((100% - 42px)/5);
        margin-right: 10px;
        cursor: pointer;
        img{
          height: 177.45px;
          width: 100%;
        }
        .video-img{
          position: absolute;
          width: 40px;
          height: 40px;
          margin-left: -130px;
          margin-top: 80px;
        }
        .text{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .menu-block{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    .notice{
      display: flex;
      justify-content: space-between;
      .notice-left{
        width: 60%;
        .tab{
          display: flex;
          margin-bottom: 20px;
          justify-content: space-between;
          .tab-item{
            font-size: 18px;
            font-weight: 900;
            cursor: pointer;
          }
          .tab-item.active{
            font-size: 18px;
            font-weight: 900;
            margin-right: 12px;
            color: #CD1738;
            cursor: pointer;
          }
        }
        .bottom{
          width: 100%;
          height: 338px;
          overflow: hidden;
          .bottom-item{
            display: flex;
            justify-content: space-between;
            height: 48px;
            line-height: 48px;
            border-bottom: 1px dashed #EDEDED;
            overflow: hidden;
            cursor: pointer;
            .article{
              display: flex;
              align-items: center;
              img{
                width: 18px;
                height: 18px;
              }
              .title{
                width: 480px;
                margin-left: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #8A8A8A;
              }
            }
            .time{
              color: #8A8A8A;
            }
          }
          .bottom-item:hover{
            color: #CD1738;
          }
        }
      }
      .notice-right{
        width: calc(40% - 40px);
        overflow: hidden;
        .notice-img{
          width: 100%;
          height:90px;
          margin-bottom: 15px;
        }
      }
    }
    .encyclopedia{
      width: 1220px;
      display: flex;
      .encyclopedia-item{
        width: calc((100% - 80px)/4);
        border: 1px solid #EDEDED;
        padding: 10px;
        box-sizing: border-box;
        margin-right: 20px;
        cursor: pointer;
        .title{
          width: 100%;
          border-bottom: 1px solid #EDEDED;
          display:flex;
          align-items: center;
          justify-content: space-between;
          .title-content{
            width: 100px;
            //margin: 0 auto;
            border-bottom: 2px solid #FF4A7A;
            color: #FF4A7A;
            font-size: 20px;
            text-align: center;
            padding: 5px 0;
          }
          .more{
            font-size: 14px;
            color: #FF4A7A;
            cursor: pointer;
            margin-left: auto;      /* 标题左边距自动，使其居中 */
          }
        }
        .list{
          .list-item{
            display: flex;
            align-items: center;
            width: 100%;
            height: 30px;
            line-height: 30px;
            color: #5b5858;
            margin-top: 10px;
            .circle{
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background-color: #C6BEBB;
              margin-right: 5px;
            }
            .text{
              width: calc(100% - 11px);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

      }
    }
    .link{
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .link-item{
        margin: 25px auto;
      }
      ::v-deep{
        .el-button--primary{
          display: flex;
          justify-content: center;
          background-color: #F5F5F5;
          color: #5b5858;

          border: none;
          width: 260px;
          padding: 5px 12px;
          line-height: 0;
          span{
            padding-left: 70px;
          }
        }
        .el-icon-arrow-down{
          margin-left: 25px;
        }
      }
      .link-item1{
        margin: 0  20px;
        ::v-deep{
          .el-button--primary{
            display: flex;
            justify-content: center;
            background-color: #F5F5F5;
            color: #5b5858;

            border: none;
            width: 260px;
            padding: 5px 12px;
            line-height: 0;
            span{
              padding-left: 50px;
            }
          }
          .el-icon-arrow-down{
            margin-left: 46px;
          }
        }
      }
    }
  }
}
</style>
